<!--
 * @Author: adolphus adolphus520@163.com
 * @Date: 2022-12-04 12:28:32
 * @LastEditors: 姚杰鸿
 * @LastEditTime: 2024-07-26 14:51:12
 * @Description: file content
-->
<template>
  <el-card shadow="hover">
    <el-form
      ref="menuFormRef"
      :model="menu"
      label-width="auto"
      style="max-width: 600px"
      :rules="rules"
    >
      <el-form-item label="菜单编码" prop="code">
        <el-input v-model="menu.code" disabled />
      </el-form-item>
      <el-form-item label="菜单图标" prop="icon">
        <ElmIconSelect v-model:value="menu.icon" />
      </el-form-item>
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="menu.name" />
      </el-form-item>
      <el-form-item label="是否为页面菜单">
        <el-switch v-model="isPage" />
      </el-form-item>
      <el-collapse-transition>
        <div v-if="isPage">
          <el-form-item label="菜单路由" prop="router.path">
            <el-input v-model="menu.router.path" />
          </el-form-item>
          <el-form-item label="菜单路由组件" prop="router.component">
            <el-input v-model="menu.router.component" />
          </el-form-item>
        </div>
      </el-collapse-transition>
      <el-form-item>
        <el-button type="primary" @click="commit(menuFormRef)">提交</el-button>
        <el-button @click="cancel(menuFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
export interface Router {
  path: string;
  component: string;
}

export interface Menu extends TreeData {
  name: string;
  icon: string;
  router: Router;
}
</script>

<script lang="ts" setup>
import type { FormInstance, FormRules } from "element-plus";
import {
  ref,
  reactive,
  watch,
  defineEmits,
  defineProps,
  PropType,
  toRef,
} from "vue";
import { useIntervalFn } from "@vueuse/core";
import { ElMessage, ElMessageBox } from "element-plus";
import { BaseField, TreeData } from "@/lib/vars";
import { phone, verificationCode as vfCode, email } from "@/lib/formCheck";
import { DepartmentApi, UserPostApi, SendVfCodeApi } from "@/apis/home";
import { MenuPostApi } from "@/apis/home";
import { IconDefinition } from "@fortawesome/free-solid-svg-icons";

const now = new Date();

const props = defineProps({
    menu: {
      type: Object as PropType<Menu>,
      default: () => ({}),
    },
  }),
  emit = defineEmits(["update:menu", "cancel", "commit"]),
  menu = toRef(props.menu),
  isPage = ref(false),
  menuFormRef = ref<FormInstance>(),
  rules = reactive<FormRules>({
    name: [
      { required: true, message: "菜单名称不能为空", trigger: "blur" },
      { min: 3, max: 5, message: "菜单名称内容在3到5个字", trigger: "blur" },
    ],
    "router.path": [
      { required: true, message: "菜单路径不能为空", trigger: "blur" },
      { max: 200, message: "菜单路径信息在200个字", trigger: "blur" },
    ],
    "router.component": [
      { required: true, message: "菜单页面不能为空", trigger: "blur" },
      { max: 35, message: "菜单页面名字在35个字", trigger: "blur" },
    ],
  });

const post = () => {
    MenuPostApi(menu.value)
      .then((res) => {
        if (200 == res.status && 200 == res.data.code) {
          menu.value = res.data.data;
          ElMessage.success("保存成功！");
          emit("commit");
        } else {
          ElMessage.error(res.data.msg);
        }
      })
      .catch((err) => {
        ElMessage.error("保存出现错误！");
      });
  },
  commit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        if (!isPage.value && menu.value.router.path) {
          ElMessageBox.confirm("菜单页面信息确认删除么？", "页面删除确认", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              menu.value.router.component = "";
              menu.value.router.path = "";
              post();
            })
            .catch(() => {
              emit("cancel");
              ElMessage.info("取消提交");
            });
        } else {
          post();
        }
      }
    });
  },
  cancel = (formEl: FormInstance | undefined) => {
    isPage.value = false;
    if (formEl) formEl.resetFields();
    emit("cancel");
  };

watch(
  () => props.menu,
  (newValue) => {
    if (menuFormRef.value) menuFormRef.value.resetFields();
    menu.value = toRef(newValue).value;
    if (menu.value.router.path) {
      isPage.value = true;
    } else {
      isPage.value = false;
    }
  }
);
</script>

<style lang="scss" scoped></style>
